<template>
  <div class="loading-wrapper">
    <div class="loading-content clearfix">
      <div class="loading" style="animation-delay: -1s"></div>
      <div class="loading" style="animation-delay: -0.1s"></div>
      <div class="loading"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "LoadingPlus"
}
</script>
<style lang="less" scoped>
.loading-wrapper {
  width: 100%;
  position: absolute;
  height: 50px;
  left: 50%;
  top: 80%;
  transform: translate(-50%, -50%);
  z-index: 999;
  .loading-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .loading {
      float: left;
      width: 15px;
      height: 15px;
      margin-right: 12px;
      background: #2196f3;
      border-radius: 100%;
      animation: zoomL 1.4s ease-in-out infinite alternate;
    }
  }
}
@keyframes zoomL {
  0%{
    opacity: 0.5;
    transform: scale(2);
  }
  100%{
    opacity: 1;
    transform: scale(1);
  }
}
</style>
